<template>
    <div>
        <Modal v-model="modal" class="modal-full" title="导入明细" width=1200>
            <div v-if="modalShow">
                <Tabs @on-click="tabClick" v-if="dataLoad">
                    <Tab-pane v-for="(item,index) in dataModel" :label="item.entity_name" :key="index">
                        <grid-panel :ref="'table-'+index" class="table-mark" :model="item" :hasCheck="false" :rowCheckMode="true" v-if="tabIsLoad[index]"></grid-panel>
                    </Tab-pane>
                </Tabs>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button @click="actionSubmit" type="primary">确认标记</i-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import Base from '../modalBase'
import gridPanel from '@/node/markGrid'
import $ from '@/common'
export default {
    extends: Base,
    props: {
        markList: {}
    },
    data() {
        return {
            path: {
                tpl: 'service/{app}/excel/ds/{id}',
                dss: '/service/{app}/imp/dss',
                data: '/service/{app}/imp/data/vendor',
                publish: '/service/{app}/pf/data/publish',
                seal: '/service/{app}/pf/data/seal'
            },
            modal: false,
            tabIsLoad: {},
            tplDataList: {},
            sheets: [],
            tplMap: {},
            dataModel: {},
            dataLoad: false,
            hasMap: false
        }
    },
    computed: {
        tplData() {
            return this.tplDataList[this.actionData.excel_ds_id]
        }
    },
    watch: {
    },
    created() {
    },
    methods: {
        load() {
            this.dataLoad = false
            this.getTplData(this.actionData.excel_ds_id).then(() => {
                this.sheets = this.tplData.sheet_name.split(';')
                this.dataModel = {}
                this.tabIsLoad = {}
                this.tplData.fields.forEach((field) => {
                    var entity_code = field.entity_code
                    if (!this.dataModel[entity_code]) {
                        this.tabIsLoad[entity_code] = false
                        this.dataModel[entity_code] = {
                            entity_name: field.entity_name,
                            entity_code,
                            path: this.path.data,
                            fields: [],
                            extPost: {
                                excel_ds_id: this.actionData.excel_ds_id,
                                entity_code,
                                batch_id: this.actionData.id
                            }
                        }
                    }
                    this.dataModel[entity_code].fields.push({
                        name: field.field_name,
                        code: field.field_code,
                        type: field.type
                    })
                })
                for (let i in this.dataModel) {
                    this.tabIsLoad[i] = true
                    break
                }
                this.dataLoad = true
            })
        },
        getTplMap() {
            if (!this.hasMap) {
                return $.link(this.path.dss).then((res) => {
                    this.tplMap = $.propMap(res.data, 'id')
                    this.hasMap = true
                })
            } else {
                return Promise((resolve) => {
                    resolve(this.tplMap)
                })
            }
        },
        getTplData(id) {
            if (this.tplDataList[id]) {
                return new Promise((resolve) => {
                    resolve(this.tplDataList[id])
                })
            } else {
                return $.link(this.path.tpl, null, {
                    param: {
                        id
                    }
                }).then((res) => {
                    this.$set(this.tplDataList, id, res.data)
                })
            }
        },
        tabClick: function(index) {
            if (!this.tabIsLoad[index]) {
                this.$set(this.tabIsLoad, index, true)
            }
        },
        close() {
            this.modal = false
        },
        getPostData() {
            var data = {}
            for (let i in this.dataModel) {
                var table = this.$refs['table-' + i]
                if (table && table.length) {
                    data[i] = {
                        publish: [],
                        seal: []
                    }
                    for (let id in table[0].markData) {
                        if (table[0].markData[id]) {
                            if (!table[0].originMark[id]) {
                                data[i].seal.push(id)
                            } else {
                                data[i].publish.push(id)
                            }
                        }
                    }
                }
            }
            return data
        },
        actionSubmit() {
            var data = this.getPostData()
            var actionList = []
            //不同实体和状态变更类型发送多个请求，使用all的回调设置整体完成的回调
            for (let i in data) {
                if (data[i].publish.length) {
                    actionList.push($.link(this.path.publish, {
                        entity_code: i,
                        ids: data[i].publish,
                        batch_id: this.actionData.id
                    }))
                }
                if (data[i].seal.length) {
                    actionList.push($.link(this.path.seal, {
                        entity_code: i,
                        ids: data[i].seal,
                        batch_id: this.actionData.id
                    }))
                }
            }
            Promise.all(actionList).then(() => {
                this.$parent.actionSuccess();
                this.close()
            })
        }
    },
    components: {
        gridPanel
    }
}
</script>

<style lang="less">
.ivu-modal-body {
    .ivu-tabs-content {
        margin-top: -8px;
    }
}
</style>
